<script setup>
import { ref, reactive } from 'vue'
import { useMenuStore } from '@/stores/menuStore'
import { ElMessage } from 'element-plus'

const menuStore = useMenuStore()
const dialogVisible = ref(false)
const isEditMode = ref(false) // 是否为编辑模式

// 表单数据
const formData = reactive({
  menuId: null,
  name: '',
  icon: '',
  path: '',
  parentId: null,
  sort: 0,
  aclId: null,
  hidden:'true'
})

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
  sort: [{ required: true, message: '请输入排序值', trigger: 'blur' }]
}

const formRef = ref(null)

// 显示对话框
const show = (menu = null) => {
  resetForm()
  if (menu) {
    // 编辑模式
    isEditMode.value = true
    Object.assign(formData, {
      menuId: menu.id,
      name: menu.name,
      icon: menu.icon,
      path: menu.path,
      parentId: menu.parentId,
      sort: menu.sort,
      aclId: menu.aclId,
      hidden: menu.hidden||false
    })
  } else {
    // 新增模式
    isEditMode.value = false
  }
  dialogVisible.value = true
}

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
  Object.assign(formData, {
    menuId: null,
    name: '',
    icon: '',
    path: '',
    parentId: null,
    sort: 0,
    aclId: null
  })
}

// 提交表单
const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return

    try {
      if (isEditMode.value) {
        await menuStore.updateMenu(formData)
      } else {
        await menuStore.createMenu(formData)
      }
      dialogVisible.value = false
      emit('success')
    } catch (error) {
      console.error('保存菜单失败', error)
    }
  })
}

// 对外暴露方法
defineExpose({ show })

const emit = defineEmits(['success'])
</script>

<template>
  <el-dialog
      :title="isEditMode ? '编辑菜单' : '新增菜单'"
      v-model="dialogVisible"
      width="50%"
      @closed="resetForm"
  >
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入菜单名称" />
      </el-form-item>

      <el-form-item label="菜单图标" prop="icon">
        <el-input v-model="formData.icon" placeholder="请输入图标类名，如el-icon-menu" />
      </el-form-item>

      <el-form-item label="路由路径" prop="path">
        <el-input v-model="formData.path" placeholder="请输入路由路径，如/system/menu" />
      </el-form-item>

      <el-form-item label="父级菜单" prop="parentId">
        <el-select v-model="formData.parentId" placeholder="请选择父级菜单" clearable>
          <el-option label="无父级菜单" :value="null" />
          <el-option
              v-for="menu in menuStore.menuList"
              :key="menu.id"
              :label="menu.name"
              :value="menu.id"
          />
          <!-- 这里可以添加更多菜单选项，实际项目中可以从store中获取 -->
        </el-select>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="formData.sort" :min="0" />
      </el-form-item>

      <el-form-item label="权限ID" prop="aclId">
        <el-input v-model="formData.aclId" placeholder="请输入关联权限ID" />
      </el-form-item>

      <!-- 添加隐藏选项表单项 -->
      <el-form-item label="是否隐藏" prop="hidden">
        <el-switch
            v-model="formData.hidden"
            active-text="隐藏"
            inactive-text="显示"
        />
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>
</style>